<template>
  <el-dialog title="选择项目" :close-on-click-modal="false" :visible.sync="visible" class="jsbos-dialog jsbos-dialog_center"
    lock-scroll append-to-body width="1200px" v-dialogDrag>
    <div class="CustomerPoolBox">
      <el-row>
        <el-col :span="24">
          <div class="">

            <el-row class="" :gutter="24">
              <el-form @submit.native.prevent label-width="80px" label-position="right">
                <!-- <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input v-model="query.customerName" placeholder="请输入客户名称" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="项目类型">
                    <el-select v-model="query.projectType" placeholder="请选择项目类型" ref="contractTypeSelect"
                      @keydown.enter.native="disableVisible" @change="selectHandle">
                      <el-option v-for="(item, index) in contractTypeOptions" :key="index" :label="item.fullName"
                        :value="item.enCode" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目编号">
                    <el-input v-model="query.projectCode" placeholder="请输入合同编号" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目名称">
                    <el-input v-model="query.projectName" placeholder="请输入合同名称" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input v-model="query.customerName" placeholder="请输入客户名称" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同类型">
                    <el-select v-model="query.contractType" placeholder="请选择合同类型" ref="contractTypeSelect"
                      @keydown.enter.native="disableVisible" @change="search()" clearable>
                      <el-option v-for="(item, index) in contractTypeOptions" :key="index" :label="item.fullName"
                        :value="item.id" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <div style="display: flex;align-items: center;margin-left: 12px;">
                    <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询
                    </el-button>
                    <el-button icon="el-icon-refresh-right" size="mini" @click="reset()">重置
                    </el-button>
                  </div>
                </el-col>
              </el-form>
            </el-row>

            <div class="Tabbox">
              <el-table ref="multipleTable" v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
                @row-click="setCustomer">
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column prop="projectCode" label="项目编号" width="150" align="left" />
                <el-table-column prop="projectName" label="项目名称" width="260" align="left" />
                <el-table-column prop="incomeTypeDesc" label="产品大类" width="auto" align="left" />
                <el-table-column prop="projectAmount" label="项目金额" width="180" align="center" />
                <el-table-column prop="projectRatio" label="拆分比例(%)" width="150" align="left">
                  <template slot-scope="scope">
                    {{ jsbos.toThousands(scope.row.contractAmount) }}
                  </template>
                </el-table-column>
              </el-table>

              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                @pagination="initData" />
            </div>
          </div>
        </el-col></el-row>
      <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow" />
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getXsProject, getAllProject } from '../api'
import { getDictionaryDataSelector, getDictionaryByIdDataSelector } from "@/api/systemData/dictionaryPlat";
import FlowBox from "@/views/workFlow/components/FlowBox";
import { isEmpty } from "@/utils/isEmpty";

export default {
  components: { FlowBox },
  props: {
    value: {
      default: () => [],
    },
    size: String,
  },
  data() {
    return {
      projectType: 'XS-HT',
      total: 0,
      visible: false,
      dataForm: {},
      multipleSelection: [],
      list: [],
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      flowVisible: false,
      typeOptions: [],
      typeProps: { label: "fullName", value: "id" },
      contractTypeOptions: [],
      query: {
        projectCode: undefined,
        projectName: undefined,
        projectType: 'XS-HT'
      }
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.getProjectTypeOptions();
  },
  methods: {
    getProjectTypeOptions() {
      getDictionaryByIdDataSelector("521590397110075013").then((res) => {
        this.contractTypeOptions = res.data.list;
      });
    },
    disableVisible() {
      this.$refs.contractTypeSelect.visible = false;
    },
    setCustomer(row, column, event) {
      console.log("ddddddddddddddd", row);
      this.visible = false;
      this.$emit("refreshDataList", row);
    },
    init(id) {
      this.visible = true;
      this.initData(id);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    initData() {
      this.listLoading = true;
      if (this.projectType == 'XS-HT') {
        getXsProject({ ...this.query, ...this.listQuery }).then((res) => {
          console.log('请求合同项目', res)
          this.list = res.data.list;
          this.total = res.data.pagination.total;
          this.listLoading = false;
        });
      } else {
        getAllProject({ ...this.query, ...this.listQuery }).then((res) => {
          console.log('请求其他项目', res)
          this.list = res.data.list;
          this.total = res.data.pagination.total;
          this.listLoading = false;
        })
      }
    },
    searchByName() {
      console.log("name..", this.query.name);
      if (!this.query.name || this.query.name.length > 1) this.search();
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    colseFlow(isrRefresh) {
      this.flowVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      // this.$refs.treeBox.setCheckedKeys([], false);
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.query.projectType = 'XS-HT';
      this.projectType = 'XS-HT';
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },

    // selectHandle
    selectHandle(type) {
      this.projectType = type;
      this.search();
    }
  },
};
</script>

<style scoped lang="scss">
.CustomerPoolBox {
  .Tabbox {
    position: relative;

    >>>.el-table__body-wrapper {
      height: 423px;
      overflow: auto;
      padding-bottom: 40px;
    }

    >>>.el-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: white;
      width: 100%;
    }
  }
}


.jsbos-dialog>>>.el-dialog__body {
  min-height: 500px;
  max-height: 500px;
}
</style>
